/*!
    create css by 2020-12-10  kexuemihe  @wang   公共样式
*/
body {
    background-color: #FAFAFA;
}

.centerBox {
    border-radius: 1rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #FFF;
    font-family: PingFang SC;
    padding-left: 2.4rem;
    padding-right: 3rem;
    width: 44rem;
    height: 20rem;
}

.closeChaS {
    cursor: pointer;
    position: absolute;
    top: 4%;
    right: 2%;
}

// <!-- 头部 -->
.header {
    box-shadow: 0px 1px 7px 0px rgba(4, 0, 0, 0.08);
    background-color: #FFF;

    .Hleft {
        display: flex;
        align-items: center;
    }

    p.personal {
        margin-left: 1.9rem;
        font-size: 1.5rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        display: flex;
        align-items: center;

        span {
            display: inline-block;
            width: .4rem;
            height: .4rem;
            background: #0AA8F9;
            border-radius: 50%;
            margin-right: 5px;
        }
    }
}

// <!-- 返回精品课程按钮 -->
.conTitle {
    .titleInfo {
        width: 10rem;
        border: thin solid #0AA8F9;
        background: linear-gradient(0deg, #FFFFFF 0%, #FFFFFF 100%);
        border-radius: 14px;
        text-align: center;
        margin: 1.5rem 0;
    }

    a {

        display: block;
        line-height: 28px;
        font-size: 1.2rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #0AA8F9;

        p {}
    }
}

// <!-- 用户信息 -->
.userinfoCon {
    font-family: PingFang SC;

    .container {
        background-color: #FFF;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }
    #userImg {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        overflow: hidden;
        margin: 21px 0;

        img {
            width: 100%;
        }
    }

    li {
        margin-bottom: 30px;

        span {
            width: 60px;
            display: inline-block;
            font-size: 1.2rem;
            font-weight: 500;
            color: #999999;
            white-space: nowrap;
        }

        input {
            margin-left: 2rem;
        }

        img {
            cursor: pointer;
        }

        i {
            color: #0AA8F9;
            cursor: pointer;
        }
    }

    .flexAdd {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .changeTel {


        h3 {
            font-size: 2rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 6rem;
        }

        input {
            margin-bottom: 10px;
        }

        input[type=tel] {
            width: 26.6rem;
            height: 3.3rem;
            background: #FAFAFA;
            border: 1px solid #F5F5F5;
            border-radius: 5px;
            text-indent: 10px;
        }

        button {
            width: 10.4rem;
            height: 3.3rem;
            background: #0AA8F9;
            border-radius: 5px;
            font-size: 1.2rem;
            font-weight: 500;
            color: #FFFFFF;
        }

        input[type=text] {
            width: 15.6rem;
            height: 3.3rem;
            background: #FAFAFA;
            border: 1px solid #F5F5F5;
            border-radius: 5px;
            margin-right: 4px;
            text-indent: 10px;
        }

        input[type=button] {
            margin-top: 10px;
            width: 26.6rem;
            height: 3rem;
            background: #05A6F9;
            opacity: 0.8;
            border-radius: 15px;
            font-size: 1.5rem;
            font-weight: 400;
            color: #FFFEFE;
            margin-bottom: 6rem;
        }

    }
}

// <!-- 修改密码弹窗 -->
// .editPwdDislog {
//     width: 100%;
//     height: 100%;
//     position: fixed;
//     left: 0;
//     top: 0;
//     z-index: 100;
//     background-color: RGBA(225, 225, 225, .6);

//     h3 {
//         width: 100%;
//         font-size: 2rem;
//         font-weight: 500;
//         color: #333333;
//         line-height: 5rem;
//         margin: 0 0 2rem 0;
//     }

//     input {
//         width: 100%;
//         border-bottom: 2px solid #05A6F9;
//         font-size: 1.5rem;
//         font-weight: 400;
//         color: #999999;
//         margin-top: 1rem;
//         line-height: 30px;
//     }

//     p {
//         font-size: 1.2rem;
//         font-weight: 400;
//         color: #999999;
//     }

//     .btns {
//         margin: 2rem 0;
//         float: right;

//         button {
//             width: 67px;
//             $height: 30px;
//             height: $height;
//             border-radius: $height/2;
//         }

//         .cancel {
//             background: #FFF;
//             border: 1px solid #CCCCCC;
//             margin-right: 1rem;
//         }

//         .confirm {
//             background: #05A6F9;
//             color: #FFF;
//         }
//     }
// }

// <!-- 修改用户名弹窗 -->
.editDislog {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    background-color: RGBA(225, 225, 225, .6);

    h3 {
        width: 100%;
        font-size: 2rem;
        font-weight: 500;
        color: #333333;
        line-height: 5rem;
        margin: 0 0 2rem 0;
    }

    input {
        width: 100%;
        border-bottom: 2px solid #05A6F9;
        font-size: 1.5rem;
        font-weight: 400;
        color: #999999;
        margin-top: 1rem;
        line-height: 30px;
    }

    p {
        font-size: 1.2rem;
        font-weight: 400;
        color: #999999;
    }

    .btns {
        margin: 2rem 0;
        float: right;

        button {
            width: 67px;
            $height: 30px;
            height: $height;
            border-radius: $height/2;
        }

        .cancel {
            background: #FFF;
            border: 1px solid #CCCCCC;
            margin-right: 1rem;
        }

        .confirm {
            background: #05A6F9;
            color: #FFF;
        }
    }
}

// <!-- 解绑微信弹窗 -->
.unbindWx {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    background-color: RGBA(225, 225, 225, .6);
    .centerBox {
        height: 25rem;
        padding: 0;
    }
    .flexAdd {
        display: flex;
        align-items: center;
    }
    .leftCon {
        font-family: PingFang SC;
        width: 55%;
        margin-top: 3.5rem;
        border-right: 1px solid #F0F0F0;
        display: flex;
        flex-direction: column;
        align-items: center;
        img {}
        i {
            display: block;
            font-size: 1.2rem;
            font-weight: 400;
            color: #0997E0;
            line-height: 4rem;
        }
        p {
            font-size: 1.2rem;
            font-weight: 400;
        }
    }
    .rightCon {
        width: 45%;
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
            width: 11.8rem;
            height: 11.8rem;
            margin-top: 4rem;
        }
        p {
            font-size: 1.2rem;
            font-weight: 400;
            color: #999999;
            line-height: 3.2rem;
        }
    }
}

// 修改后的弹窗
#commitDialog {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;top: 0;
    z-index: 1000;
    div{
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 142px;
        background: #FFFFFF;
        border: 1px solid #05A6F9;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    span {
        user-select: none;
        font-size: 1.5rem;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #05A6F9;
        line-height: 40px;
    }
}